import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import { HeaderWrapper,Logo,Nav,NavItem,NavSearch,Addition,Button,SearchWrapper,
    SearchInfo,SearchInfoTitle,SearchInfoSwitch,SearchInfoItem,SearchInfoList
} from './style';
import { actionCreators } from './store';
import React, { Component } from 'react';


class Header extends Component {

    getListArea(){
        const {focused, list, page, totalPage, mouseIn,handleMouseEnter, handleMouseLeave,handleChangePage} = this.props;
        // 不支持list[i]
        const newList = list.toJS();
        const pageList = [];

        //  解决了一进来undefined 换一换后还是会key报错 
        //  换一换最后一页有空  （就会有undefined所以key报错，满足是10的倍数后不会渲染空对象）
        if( newList.length ){
            for( let i = ( page - 1 ) * 10; i < page * 10; i++){
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }

        if(mouseIn || focused){
            return(
                <SearchInfo 
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}
                >
                    <SearchInfoTitle>
                        热门搜索
                        <SearchInfoSwitch 
                             onClick={()=>handleChangePage(page,totalPage,this.spinIcon)}
                        >
                             <i ref={(icon)=>{this.spinIcon = icon}}
                                className="iconfont spin"
                             >&#xe635;</i>
                            换一换
                        </SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                 </SearchInfo>
            )
        }else{
            return null;
        }
    }
    
    render(){
        const {focused,handleInputFocus,handleInputBlur,list} =this.props;
        return(
            <HeaderWrapper>
            <Logo />
            <Nav>
                <NavItem className='left active'>首页</NavItem >
                <NavItem className='left'>下载APP</NavItem >
                <NavItem className='right'>登录</NavItem >
                <NavItem className='right'>
                    <i className="iconfont span">&#xe636;</i>
                </NavItem >
                {/* 搜索 */}
                <SearchWrapper>
                    <CSSTransition
                       in={focused}
                       timeout={200}
                       classNames="slide"
                    >
                      <NavSearch className={focused ? 'focused':''}
                            onFocus={() => handleInputFocus(list)}
                            onBlur={handleInputBlur}
                        />
                    </CSSTransition>
                    <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe86e;</i>
                    {/* 热条搜索 */}
                    {this.getListArea()}
                </SearchWrapper>
                {/* 搜索 */}
            </Nav>
            <Addition>
                <Button className='reg'>注册</Button>
                <Button className='writting'>
                    <i className="iconfont">&#xe600;</i>
                    写文章
                </Button>
            </Addition>
        </HeaderWrapper>
        )
    }

    
}

const mapStateToProps = (state) => {
    return{
        // 下面的等价于focused:state.get('header').get('focused')
        focused:state.getIn(['header','focused']),
        mouseIn:state.getIn(['header','mouseIn']),
        list:state.getIn(['header','list']),
        page:state.getIn(['header','page']),
        totalPage:state.getIn(['header','totalPage'])
    }
}
const mapDispathToProps = (dispatch) => {
    return{
        handleInputFocus(list){
            list.size === 0 && dispatch(actionCreators.getList())
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur(){
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter(){
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLeave(){
            dispatch(actionCreators.mouseLeave());
        },
        handleChangePage(page,totalPage,spin){
            // replace(/[^0-9]/ig,'') 意思是：不是0-9变为空
            let originAngle = spin.style.transform.replace(/[^0-9]/ig,'')
            if(originAngle){
                // 字符串变正数
                originAngle = parseInt(originAngle,10)
            }else{
                originAngle = 0;
            }
            spin.style.transform = 'rotate(' + ( originAngle + 360 ) + 'deg)';

            if ( page < totalPage ) {
              dispatch(actionCreators.ChangePage(page + 1));
            } else {
              dispatch(actionCreators.ChangePage(1));
            }
        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);